<template>
  <div class="page ta-c">
    <div style="width: 240px; margin: 20px auto;">
      <image src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/create-success.png" mode="widthFix"></image>
    </div>
    <div class="c-blue fs-xl pdv">布置成功！</div>
    <div class="pdb-l" v-if="!prePublishAt">已将作业布置到 {{selectedGroupNames}}</div>
    <div class="pdb-l" v-else>作业将于 {{prePublishAt}} 发送到 {{selectedGroupNames}}！</div>
    <div v-if="!prePublishAt">
      <div class="pd-l">
        <button v-if="tasks.length > 1" class="ui btn primary" @tap="isShowGroupSelectPanel = true">通知到微信群</button>
        <button v-else class="ui btn primary" open-type="share">通知到微信群</button>
      </div>
    </div>
    <div class="pd-l" style="padding-top: 0;">
      <notify-btn cls="ui btn primary is-outlined" @hit="goIndex">返回首页</notify-btn>
    </div>
    <div class="group-select-panel" v-show="isShowGroupSelectPanel">
      <div class="group-select-panel-inner">
        <div class="group-select-panel-hd ta-c bd-b">
          <div class="fs-3">选择要通知的班级</div>
          <div class="c-gray ta-c fs-4" style="padding-top: 8px;">选择的班级要与分享的微信群保持一致</div>
          <span class="close" @tap="isShowGroupSelectPanel = false"><i class="if icon-close c-gray" style="font-size: 12px;"></i></span>
        </div>
        <div class="pdh">
          <div class="group-select-panel-bd">
            <div v-for="(n, i) in taskRadios" :key="n.value" @tap="radioChange(n.value)" class="weui-flex pdv v-mdl" :class="{'bd-b-light': i < taskRadios.length - 1}">
              <div class="weui-flex__item fs-xl ta-l">{{n.name}}</div>
              <div class="ta-r pdr">
                <span v-if="n.shared" class="tag info is-outlined">done</span>
              </div>
              <div class="ta-r">
                <div>
                  <rdo :checked="n.checked"></rdo>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="group-select-panel-ft">
          <button v-if="selectedId" class="ui btn primary no-rounder" open-type="share">转发到微信</button>
          <button v-else class="ui btn primary disabled no-rounder">转发到微信</button>
        </div>
      </div>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import NotifyBtn from '@/components/notify-btn'
import Rdo from '@/components/rdo'
import {mapGetters, mapActions} from 'vuex'
import base from '@/mixins/base'
import * as $task from '@/api/task'
import dayjs from 'dayjs'

export default {
  mixins: [base],
  components: {
    PageCommon,
    NotifyBtn,
    Rdo
  },
  data () {
    return {
      selectedId: 0,
      tasks: [],
      isShowGroupSelectPanel: false,
      doneIds: []
    }
  },
  computed: {
    ...mapGetters('group', [
      'selectedGroupNames'
    ]),
    taskRadios () {
      let t = []
      this.tasks.forEach(n => {
        t.push({
          name: n.group.name,
          value: n.id,
          checked: n.id === this.selectedId,
          shared: this.doneIds.indexOf(n.id) >= 0
        })
      })
      return t
    },
    selectedTask () {
      let t = null
      this.tasks.forEach(n => {
        if (n.id === this.selectedId) {
          t = n
        }
      })
      return t
    },
    prePublishAt () {
      let task = this.tasks[0] || null
      if (!task) return ''
      if (!task.prePublishAt) return ''
      return dayjs(task.prePublishAt).format('YYYY-MM-DD HH:mm')
    },
    tid () {
      let t = this.tasks[0] || 0
      return t.id || 0
    }
  },
  onShareAppMessage() {
    this.doneIds.push(this.selectedTask.id)
    return {
      title: this.selectedTask.document.name,
      path: '/pages/task-invite/main?taskId=' + this.selectedTask.id
    }
  },
  methods: {
    async loginBack () {
      try {
        let {taskIds} = this.getParams()
        taskIds = taskIds.split('_').map(n => parseInt(n))
        this.tasks = await $task.getAllByIds(taskIds)
      } catch (e) {
        this.$debug({err: e})
      }
    },
    radioChange (id) {
      this.selectedId = id
    },
    goIndex () {
      if (this.selectedTask && this.selectedTask.prePublishAt) {
        this.$store.commit('document/DOCUMENT_SET_NAV_TYPE', 'unpublished')
      } else {
        this.$store.commit('document/DOCUMENT_SET_NAV_TYPE', 'published')
      }
      wx.reLaunch({
        url: '/pages/documents/main'
      })
    }
  },
  watch: {
    tasks (nv) {
      if (nv.length === 1) {
        this.selectedId = nv[0].id
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/var.less";

.page {
  background-color: white;
  height: 100%;
}

.group-select-panel {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: rgba(0,0,0,.7);
  &-inner {
    border-radius: 5px;
    width: 80%;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    max-height: 90%;
    overflow: scroll;
    transform: translate(-50%, -50%);
  }
  &-hd {
    position: relative;
    padding: 12px;
    .close {
      position: absolute;
      right: 12px;
      top: 7px;
    }
  }
  &-bd {
  }
}
</style>
